<template>
  <div class="count-card">
      <div class="count-header">{{title}}</div>
      <CountUp :prefix="prefix" :duration="duration" :number="number" className="count-com"/>
      <div class="count-data">
          <SvgIcon :style="{color: up ? 'red':'green'}" :name="up ? 'xiangshang':'xiangxia1' " />
          <span>{{data}}</span>
      </div>
      <div class="link">
          <el-link type="primary">查看详情</el-link>
      </div>
       
  </div>
</template>

<script>
import CountUp from '@/components/CountUp'
export default {
    name:'CountCard',
    components: {CountUp},
    props:{
        title: {
            type:String
        },
        number:{
            type:Number
        },
        prefix:{
            type:String,
            default: ''
        },
        up:{
            type: Boolean,
            default: true
        },
        data:{
            type:String
        },
        duration:{
            type: Number,
            default: 2
        }
    }
}
</script>

<style lang="scss" scoped>
.count-card{
    display: inline-block;
    background: #fff;
    min-width: 130px;
    padding: 20px 0;
    .count-header{
        text-align: center;
        font-size: 16px;
    }
    .count-com{
        text-align: center;
        font-size: 32px;
        font-weight: 700;
        margin: 15px 0;
    }
    .count-data{
        text-align: center;
        font-size: 14px;
    }
    .link{
        text-align: center;
         margin-top: 20px;
    }
}
</style>